<!DOCTYPE html>
<html lang="en">
<head>
<title>Accessibility Information</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="sakai.accessibility" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">Accessibility Information</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_9979CE33-A596-4D1B-BB81-8A335D3375C9" class="text-block-content">
    <p>Sakai is a Learning Management System created to assist faculty and students by providing online tools for communication, assessment, content delivery, etc.</p>
<p>Sakai is composed of sites, and each site has a number of tools selected by the site creator. There is also a special site, My Workspace (private to you), where you can access personal information and change your settings.</p>
<p>This document is assistive technology agnostic and will briefly describe the different areas of the interface, point out how they are implemented for accessibility, and go into more depth where extra assistance may be needed.</p>
<p>If you need specific help with your assistive technology, please contact your institution's office for Disability Student Services and/or Information Technology Services.</p>
<p>For additional information visit the <a href="https://sakaiproject.atlassian.net/wiki/spaces/2ACC/overview" target="_blank">Accessibility Working Group</a> on the Confluence Wiki.</p>
<p><em>Note: The content depicted in images on this page may differ from what you experience due to your institution's customization of Sakai.</em></p>
<p>This article describes the following:</p>
<ul>
<li><a href="#desktop-versus-mobile-view" target="_self">Desktop versus Mobile View in Sakai</a></li>
<li>
<a href="#organization-of-uvacollab" target="_self">Organization of Sakai</a><ul>
<li><a href="#important-access-keys" target="_self">Important Access Keys for Main Navigation</a></li>
<li><a href="#quick-access-skip-to-links" target="_self">Quick Access (Skip to...) Links</a></li>
<li><a href="#my-sites" target="_self">Sites</a></li>
<li><a href="#your-profile-picture-and-name-use-this-menu-to-log-out" target="_self">Your Profile Picture and Name (Use This Menu to Log Out)</a></li>
<li><a href="#favorite-sites-list" target="_self">Favorite Sites List (on Desktop View)</a></li>
<li><a href="#tool-menu-for-the-current-site" target="_self">Tool Menu for the Current Site</a></li>
<li><a href="#expand-collapse-tool-navigation-for-sighted-users" target="_self">Expand/Collapse Tool Navigation (for Sighted Users, on Desktop View)</a></li>
<li><a href="#content-area" target="_self">Content Area</a></li>
<li><a href="#access-keys-to-navigate-the-content-area" target="_self">Access Keys to Navigate the Content Area</a></li>
<li><a href="#footer" target="_self">Footer</a></li>
</ul>
</li>
<li><a href="#rich-text-editor-accessibility" target="_self">Rich Text Editor Accessibility</a></li>
<li><a href="#instructions-for-enlarging-screen-elements-modifying-colors-contrast" target="_self">Instructions for Enlarging Screen Elements, Modifying Colors/Contrast</a></li>
<li><a href="#getting-more-help" target="_self">How to Get More Help</a></li>
</ul>
<p>If you need specific help with your assistive technology, please refer to your local institution's website to find contact information for groups that can assist you with accessibility accommodations. </p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="desktop-versus-mobile-view">
    <h2 class="step-title screensteps-heading">Desktop versus Mobile View</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_F771B90D-BE8D-45F3-B06B-41B9E05F241F" class="text-block-content">
    <p>Sakai has a responsive design to adapt to different screen sizes, so certain elements only display when an internet browser window is larger than 770 pixels in width. In the descriptions that follow, <strong>Desktop View</strong> will be used to refer to the display when an internet browser window is larger than 770 pixels in width. <strong>Mobile View</strong> will refer to the display on smaller windows.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="organization-of-uvacollab">
    <h2 class="step-title screensteps-heading">Organization of Sakai</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_84F2AC84-1748-4BE4-BDB1-4DE1A44C5035" class="text-block-content">
    <p>Always present in Sakai are the following:</p>
<ul>
<li>Quick access <strong>Skip to...</strong> links</li>
<li>One of the following two items, depending on whether or not you are logged into Sakai:<ol>
<li>Before logging in: <strong>Login</strong> links</li>
<li>After logging in: the<strong> View All Sites</strong> menu and your profile picture and name (a menu you access to <strong>Log Out</strong>)</li>
</ol>
</li>
<li>List of favorite sites (on Desktop View)</li>
<li>Tool Menu for the current site</li>
<li>
<strong>Expand/Collapse Tool Navigation</strong> feature (for sighted users on Desktop View)</li>
<li>Content area</li>
<li>Footer</li>
</ul>
  </div>
</div>
 
        <div class="step screensteps-section screensteps-depth-2" id="important-access-keys">
    <h3 class="step-title screensteps-heading">Important Access Keys for Main Navigation</h3>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_D22654A0-AB0E-4495-A316-5B12245849CD" class="text-block-content">
    <p>The major elements of a Sakai site can be accessed via <strong>Access keys</strong> (see note for more information on how to use <strong>Access keys</strong>):</p>
<p><strong>Content</strong> - This access key takes you to the area that contains the site where you are working.</p>
<ul>
<li>
<strong>Landmark</strong>: main (“Jump to Content”)</li>
<li>
<strong>Access key</strong>:  [<strong>C</strong>]</li>
</ul>
<p><strong>Tools</strong> - Every Sakai site has a Tool Menu with a list of links to the current site's tools.</p>
<ul>
<li>
<strong>Landmark</strong>: navigation (“Tools”)  </li>
<li>
<strong>Access key</strong>:  [<strong>L</strong>]</li>
</ul>
<p><strong>View All Sites</strong> menu - After you log in, you can use this menu to access your active sites.</p>
<ul>
<li>
<strong>Landmark</strong>: navigation (“My Sites”)</li>
<li>
<strong>Access key</strong>:  [<strong>W</strong>]</li>
</ul>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock screensteps-wrapper--info screensteps-wrapper">
  <div id="text-content_71773167-53F4-4ECF-AB9A-5A07072C7869" class="text-block-content">
    <p><strong>Note: </strong>The exact keyboard commands to trigger an Access key depend on your computer operating system and internet browser.  Commonly used browsers tend to use the following commands:</p>
<ul>
<li>Most Windows browsers: <strong>Shift + Alt + [the Access key]</strong>
</li>
<li>Most Mac browsers: <strong>Ctrl + Option + [the Access key]</strong>
</li>
</ul>
<p>The information on Access keys in this note provided by <a href="http://webaim.org" target="_blank">WebAIM.org</a> (opens new window). You can learn more about Access keys on their website, <a href="http://webaim.org/techniques/keyboard/accesskey" target="_blank">Keyboard Accessibility © WebAIM</a> (opens new window).</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="quick-access-skip-to-links">
    <h3 class="step-title screensteps-heading">Quick Access (Skip to...) Links</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/114/955/original/a2694df9-537f-465a-b3cd-1f802d4f5fb5.png" alt="Image of normally invisible quick links used in keyboard navigation" height="125" width="520">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_33CDC720-F6B8-4C20-B5C8-C1DAF6592C9F" class="text-block-content">
    <p><strong>Location</strong>: The quick access links are the first three links on the page. They are announced by text-to-speech software after the page title.</p>
<p>These links enable the user to reach frequently used areas of Sakai.</p>
<p>Pictured above is how one of these (normally invisible) links displays on the page if you navigate using the <strong>Tab</strong> key on your keyboard in Chrome after logging in to Sakai.</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="my-sites">
    <h3 class="step-title screensteps-heading">Sites</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/114/957/original/4bfc689e-b157-481d-8ba1-3d58e5dfe426.png" alt="upper nav bar showing sites menu icon" height="93" width="852">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_C62302EE-16FF-4A26-A0FE-6CFDD5617841" class="text-block-content">
    <p>When logged in on Desktop View, the<strong> Sites</strong> menu follows the Academic alerts icon.</p>
<p>On Mobile View, the <strong>Sites </strong>menu appears below your profile icon (described next).</p>
<p>You can expand the <strong>Sites</strong> menu to access your active sites.</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="your-profile-picture-and-name-use-this-menu-to-log-out">
    <h3 class="step-title screensteps-heading">Your Account Menu (Use This Menu to Log Out)</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/858/092/original/95e0a201-33fc-4285-a3c4-9650fdf7554b.png" alt="user account menu" height="885" width="527">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_DAA88B5E-97F1-4508-92C5-CFB444F4C27E" class="text-block-content">
    <p>Your profile picture (which displays as your initials if there is no photo) is at the top right of the screen.</p>
<p>Selecting your profile picture opens the user account menu with the following options:</p>
<ol>
<li>Your profile picture and a <strong>View Profile</strong> link that you can select to edit your picture or profile  </li>
<li>A <strong>Manage Preferences</strong> link that will take you to a page where you can edit your Sakai notifications, time zone, language, and active sites</li>
<li>A <strong>My Tasks</strong> link that will take you to task list where you can view or edit tasks.</li>
<li>A <strong>My</strong> <strong>Calendar</strong> link that will take you to your aggregated calendar for all enrolled sites</li>
<li>A <strong>My Grades</strong> to view grades. </li>
<li>You have the option to switch your theme to <strong>Light Mode</strong> or <strong>Dark Mode</strong> depending on your viewing preference.</li>
<li>A <strong>Log Out </strong>link to log you out and take you to back to the <em>Gateway</em> page of Sakai</li>
</ol>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="favorite-sites-list">
    <h3 class="step-title screensteps-heading">Pinned Sites List (on Desktop View)</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/114/961/original/62b1d9ad-6747-41ce-9c49-44ef8f1e4ffc.png" alt="" height="407" width="275">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_09395B49-CEA3-4316-8C2E-C253B8B2E248" class="text-block-content">
    <ul>
<li>
<strong>Location:</strong> On Desktop View only, the pinned sites list appears in the Tool Menu.</li>
<li>
<strong>Landmark:</strong> Navigation (“Sites list begins here”)  </li>
<li>
<strong>Heading:</strong> Level 1 (“Sites list begins here”)</li>
</ul>
<p>This list contains the links to sites you most commonly use. You can select which sites appear in the list by selecting them as Pinned from the <strong>View All Sites</strong> menu. Each favorite site's title will either take you to the site, or if you <strong>Tab</strong> to the menu and press the <strong>Down</strong> arrow key, it will supply you with a submenu of that site’s tools so that you can go straight to that tool on the selected site.</p>
<p>Using the <strong>Up</strong> and <strong>Down</strong> arrow keys, you can navigate the submenu to the site specific tool links. These links can be activated using the <strong>Enter</strong> key.</p>
<p>If you have a large number of pinned sites, only the first 15 sites will display in this list.</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="tool-menu-for-the-current-site">
    <h3 class="step-title screensteps-heading">Tool Menu for the Current Site</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/005/024/096/original/55fcf9bb-e87c-4506-be77-f64a07040aee.png" alt="" height="846" width="565">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_76812A98-3B2C-4CB1-860F-EFF7EED5090B" class="text-block-content">
    <ul>
<li>
<strong>Location:</strong> On Desktop View, the Tool Menu appears to the left of the screen. On Mobile View, it can be accessed by selecting <strong>Tools</strong> near the top of the screen.</li>
<li>
<strong>Landmark:</strong> Navigation (“Tools list begins here”)</li>
<li>
<strong>Heading:</strong> Level 1 (“Tools list begins here”)</li>
<li>
<strong>Access key:</strong> [<strong>L</strong>]</li>
</ul>
<p>Pictured above is the Tool Menu of a <strong>Home</strong> site, in both Desktop View and Mobile View.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock screensteps-wrapper--info screensteps-wrapper">
  <div id="text-content_DE612711-2C77-4EA5-ABCE-1A0093476EFB" class="text-block-content">
    <p>Note: The <em>Help</em> tool will always be present as the last item in the Tool Menu no matter what site you are on. (More specifically, on the Mobile site, it will be the last option in the Tools drop-down menu. On the Desktop site, it is the last option in the Expand/collapse tool navigation menu to the left of the page.) This enables quick access to the Sakai help documentation.</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="expand-collapse-tool-navigation-for-sighted-users">
    <h3 class="step-title screensteps-heading">Expand/Collapse Tool Navigation (for Sighted Users, on Desktop View)</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/008/968/407/original/21f6e518-543a-4712-9eea-ca9a125d9748.png" alt="" height="335" width="240">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_FE87FFAD-34E6-4323-9A75-825ABF496057" class="text-block-content">
    <p><strong>Location: </strong>On Desktop View only, at the top of the screen and to the right of the system logo, there is a three-horizontal-lines icon which can be used to collapse or expand the left side navigation menu. When expanded (the default state) the Tool Menu is displayed vertically along the left side of the screen. When collapsed, the left Tool Menu disappears and only the content frame is displayed below the top navigation bar. Clicking on the icon again will toggle it between expanded and collapsed display.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock screensteps-wrapper--info screensteps-wrapper">
  <div id="text-content_F6282E86-E4D0-40AD-81F4-FE0E1F44CA74" class="text-block-content">
    <p>Note: Using the <strong>Expand/Collapse Tool Navigation</strong> icon will have no effect on page navigation for users of screen reading software as all tools will still be available and announced.</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="content-area">
    <h3 class="step-title screensteps-heading">Content Area</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/007/858/094/original/df98d6ea-85a1-4f61-b7b8-bfd6545a3a95.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/007/858/094/medium/df98d6ea-85a1-4f61-b7b8-bfd6545a3a95.png" alt="" height="206" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_A7825036-D751-4E74-8E98-864718E2A1B2" class="text-block-content">
    <p>At the top of the screen, you will find:</p>
<ol>
<li>The <strong>title of the site you are in and the tool</strong> you are currently viewing. This is also a <strong>Refresh Tool</strong> link that returns you to the main page of the tool when clicked. Pictured above is an example of an <strong>Announcements </strong>(<strong>Refresh Tool</strong>) link.</li>
<li>There is also a <strong>Help</strong> button in the top navigation, which opens a new tab or window (depending on your internet browser preferences) with help documentation for the current tool.</li>
</ol>
<p>3. The content comes after the Tool Menu.  </p>
<ul>
<li>
<strong>Location:</strong> On Desktop View, the content displays to the right of the Tool Menu. On Mobile View, the content appears underneath the <strong>Tools</strong> link.</li>
<li>
<strong>Landmark:</strong> Main</li>
<li>
<strong>Heading:</strong> Level 1 “Content begins here”</li>
<li>
<strong>Access key:</strong> [<strong>C</strong>]</li>
</ul>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="access-keys-to-navigate-the-content-area">
    <h3 class="step-title screensteps-heading">Access Keys to Navigate the Content Area</h3>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_47594A5B-31E0-4613-B8F8-83861F00CD5B" class="text-block-content">
    <p>Most content views use some or all of these Access keys:</p>
<ul>
<li>Delete, remove, or cancel - <strong>Access key:</strong> [<strong>X</strong>]</li>
<li>Edit or revise -  <strong>Access key:</strong> [<strong>E</strong>]</li>
<li>Help -   <strong>Access key:</strong> [<strong>0</strong>]</li>
<li>Refresh -   <strong>Access key: </strong>[<strong>U</strong>]</li>
<li>Save -  <strong>Access key:</strong> [<strong>S</strong>]</li>
<li>View or preview -  <strong>Access key:</strong> [<strong>V</strong>] </li>
</ul>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock screensteps-wrapper--info screensteps-wrapper">
  <div id="text-content_4BF60BD2-B509-4286-9848-65A389A67194" class="text-block-content">
    <p>Note:<strong> </strong>The exact keyboard commands to trigger an Access key depend on your computer operating system and internet browser. Commonly used browsers tend to use the following commands:</p>
<ul>
<li>Most Windows browsers: <strong>Shift + Alt + [the Access key]</strong>
</li>
<li>Most Mac browsers: <strong>Ctrl + Option + [the Access key]</strong>
</li>
</ul>
<p>The information on Access keys in this note provided by <a href="http://webaim.org" target="_blank">WebAIM.org</a> (opens new window). You can learn more about Access keys on their website, <a href="http://webaim.org/techniques/keyboard/accesskey" target="_blank">Keyboard Accessibility © WebAIM</a> (opens new window).</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="footer">
    <h3 class="step-title screensteps-heading">Footer</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/006/672/879/original/dce7bc35-6fc4-4c13-8824-a7710070495a.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/006/672/879/medium/dce7bc35-6fc4-4c13-8824-a7710070495a.png" alt="" height="65" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_D2C34518-1A68-45F3-82F6-F6484B813806" class="text-block-content">
    <p>The footer contains a list of links:</p>
<ul>
<li>
<strong>Gateway,</strong> which takes you to the main page (homepage) of Sakai</li>
<li>
<strong>Accessibility Information,</strong> which displays the accessibility help documentation</li>
<li>
<strong>The Sakai Project</strong> and <strong>Powered by Sakai</strong> links, which take you to the Sakai LMS website</li>
</ul>
<p>The footer also includes the following:</p>
<ul>
<li>
<strong>Copyright</strong> information for the Sakai software</li>
<li>
<strong>Jump to top </strong>arrow, which will take you back to the top of the page</li>
</ul>
<p><em>Note: These links may differ based on your institution's customization of Sakai.</em> </p>
  </div>
</div>
 
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="rich-text-editor-accessibility">
    <h2 class="step-title screensteps-heading">Rich Text Editor Accessibility</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_7FCAC653-F61C-430A-82FA-61A874D455D3" class="text-block-content">
    <p>In most areas of Sakai where text can be entered, you can use the <strong>Rich Text Editor</strong> to edit and format your text, and to add links, images, or media.</p>
<p>Steps to access the Rich Text Editor's toolbar with a keyboard are included in <a href="content.hlp?docId=whataresomekeyboardshortcutsfortherichtexteditor">What are some keyboard shortcuts for the Rich Text Editor?</a></p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="instructions-for-enlarging-screen-elements-modifying-colors-contrast">
    <h2 class="step-title screensteps-heading">Instructions for Enlarging Screen Elements, Modifying Colors/Contrast</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_AE3419E4-AFB9-45BC-871D-C3FF0491D4D5" class="text-block-content">
    <p>You can use the browser’s zooming function to increase text size. Sakai will work well up to 200% zoom.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock screensteps-wrapper--warning screensteps-wrapper">
  <div id="text-content_D550DEEB-9146-49B2-A022-1431C018BAA3" class="text-block-content">
    <p>Note: The zoom function for date-picker elements may work differently depending on the browser you are using. Modern browsers now have their own date pickers, and these may scale differently in different browsers.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_077BF671-093A-4678-B071-62813DD55A73" class="text-block-content">
    <p>If you need a higher level of magnification, or if you need to have the cursor/pointer augmented, you may be more comfortable using a third-party magnifier such as <a href="https://support.freedomscientific.com/Products/LowVision/MAGic" target="_blank">MAGic</a> (opens new window) or <a href="https://www.freedomscientific.com/products/software/zoomtext/" target="_blank">ZoomText</a> (opens new window).</p>
<p>To change color and contrast settings, use the operating system settings, browser settings, or your preferred browser plug-ins.  </p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="getting-more-help">
    <h2 class="step-title screensteps-heading">Getting More Help</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_3E56583D-E261-462C-83E9-7770F8058B98" class="text-block-content">
    <p>If you need further help, please contact your local institution's accessibility support resources.</p>
<p> </p>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
